<template>
  <div>
    <div class="ke__panel">
      <div class="ke__panel-head">
        <el-button size="small" :loading="subing" type="primary" @click="$refs.form.onSubmit()">
          <i class="icon icon-save" style="font-size: 12px"/>
          保存
        </el-button>
      </div>

      <div class="ke__panel-body">
        <k-form class="form-panel"
                ref="form"
                v-loading="loading"
                @submit="onSubmit"
                label-width="180px">
          <el-tabs type="card" v-model="tab">
            <el-tab-pane v-for="item in tabs" :key="item.id" :name="item.name" :label="item.title">
              <k-form-item v-for="form in fields"
                           :key="form.name"
                           :label="form.title">
                <!-- 输入框 -->
                <el-input v-if="form.component_type === 'input'"
                          v-model="form.value"
                          :style="formItemStyle(form)"
                          @input="onInput(form)"
                />
                <!-- 文件上传框 -->
                <k-file-upload v-else-if="form.component_type === 'file'"
                               :name="form.name"
                               v-model="form.value"
                               :accept="form.extends.accept"
                               @input="onInput(form)"/>
                <!-- 图片上传框 -->
                <k-simple-upload v-else-if="form.component_type === 'image'"
                                 v-model="form.value"
                                 :multiple="Array.isArray(form.value)"
                                 @input="onInput(form)"/>
                <!-- 多行输入框 -->
                <el-input v-else-if="form.component_type === 'textarea'"
                          v-model="form.value" type="textarea" rows="5"
                          @input="onInput(form)"/>
                <!-- 富文本 -->
                <k-editor v-else-if="form.component_type === 'editor'"
                          :name="form.name"
                          v-model="form.value" @input="onInput(form)"/>

                <div class="ke__help">
                  {{ form.desc }}
                </div>
              </k-form-item>
            </el-tab-pane>
          </el-tabs>
        </k-form>
      </div>
    </div>
  </div>
</template>

<script>
import { Vue, Component } from 'vue-property-decorator'
import KEditor from '@/components/editor'
import KSimpleUpload from '@/components/simple-upload/index'
import KFileUpload from '@/components/KFileUpload'
@Component ({
  components: { KFileUpload, KSimpleUpload, KEditor }
})
export default class DataConfig extends Vue {
  loading = true
  list = []
  tab = 'base'
  subing = false
  form = {}

  get tabs() {
    return this.list.filter(item => !item.group)
  }

  get fields() {
    return this.list.filter(item => item.group === this.tab)
  }

  mounted () {
    this.loading = true
    this.$http.get('admin/config')
      .finally(() => this.loading = false)
      .then(result => {
        if (result.res_code === 0) {
          this.list = result.list
        } else {
          this.$message.error(result.res_msg)
        }
      })
  }

  formItemStyle (item) {
    return {
      width: item.width ? `${item.width}px` : ''
    }
  }

  onInput (item) {
    this.$set(this.form, item.id, item.value)
  }

  // 提交表单
  onSubmit () {
    this.subing = true
    this.$http.post('admin/config', this.form)
      .finally(() => this.subing = false)
      .then(result => {
        if (result.res_code === 0) {
          this.$message.success('保存成功')
        } else {
          this.$message.error(result.res_msg)
        }
      })
  }

}
</script>

<style scoped lang="scss">
  .form-panel {
    min-height: 300px;
  }
  /deep/ .el-tabs__header {
    margin-left: 60px;
  }
</style>
